<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/normalize.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/main.css" />
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1940253_hk5amdc6e5.css" />
  <link rel="stylesheet" href="./util/swiper/css/swiper.min.css" />
</head>

<body>
  <!-- 头部start -->
  <?php include('header.php')?>
  <!-- 头部end -->
  <!-- 轮播图start -->
  <div id="slide-wrap">
    <div class="slide-content">
      <ul class="clearfix">
        <li><img src="./image/background.png" alt="" width="100%" /></li>
        <li><img src="./image/background.png" alt="" width="100%" /></li>
        <li><img src="./image/background.png" alt="" width="100%" /></li>
      </ul>
    </div>
    <ul class="slide-nav">
      <a href="javascript: void(0);" class="current"></a>
      <a href="javascript: void(0);"></a>
      <a href="javascript: void(0);"></a>
    </ul>
    <span class="slide-prev"><i class="iconfont icon-jiantou"></i></span>
    <span class="slide-next"><i class="iconfont icon-jiantou-copy"></i></span>
  </div>
  <!-- 轮播图end -->
  <!-- 主体内容 start -->
  <div class="container">
    <!-- 朗朗口腔start -->
    <section>
      <header>
        <div class="main-title padding-bottom-70 padding-top-90">
          <h4>朗朗口腔</h4>
          <p>
            呵护牙齿健康 创造美好未来
            <span></span>
            care for teeth to create a better future
          </p>
        </div>
      </header>
      <div class="info-list">
        <div id="infoListWrap"></div>
        <a href="" class="more-link">
          查看更多
        </a>
      </div>
    </section>
    <!-- 朗朗口腔end -->
    <!-- 朗朗公益start -->
    <section class="welfare">
      <header>
        <div class="main-title padding-bottom-55 padding-top-55">
          <h4>朗朗公益</h4>
          <p>
            呵护牙齿健康 创造美好未来
            <span></span>
            care for teeth to create a better future
          </p>
        </div>
      </header>
      <div class="welfare-wrap" id="welfareWrap">
        <div id="infoListWrap1" style="margin: auto;"></div>
      </div>
    </section>
    <!-- 朗朗公益end -->
  </div>
  <!-- 医生start -->
  <section class="doctor">
    <header style="display: none;">
      <div class="main-title padding-bottom-70 padding-top-90">
        <h4>朗朗口腔</h4>
        <p>
          呵护牙齿健康 创造美好未来
          <span></span>
          care for teeth to create a better future
        </p>
      </div>
    </header>
    <div class="container">
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide clearfix">
            <div class="img">
              <img src="./image/doc-img004.png" alt="" />
              <span class="name">方晓珍</span>
            </div>
            <div class="content">
              <h4 class="title">牙周主诊医师</h4>
              <span class="specialty">擅长：仿真陶瓷牙修复、牙周系统治疗、残根残冠的保存治疗等。</span>
              <i class="line"></i>
              <p class="doc">
                国内知名大学口腔医学学士，曾就职于高端私人齿科工作室，从事口腔事业10余年，对口腔各类常见疾病的临床治疗积累了丰富经验。积极学习新技术的临床应用，不断进修提升，精通牙体保存治疗。数次参加北京医科大学牙周学习研究项目、香港大学牙周学习研究项目。技术上追求完美，坚持
                “微创无痛治疗” 原则，深受患者的信赖！
              </p>
              <a href="javascript:void(0)" class="line-more">查看更多<i class="iconfont icon-jiantou1"></i></a>
            </div>
          </div>
          <div class="swiper-slide clearfix">
            <div class="img">
              <img src="./image/doc-img004.png" alt="" />
              <span class="name">方晓珍</span>
            </div>
            <div class="content">
              <h4 class="title">牙周主诊医师</h4>
              <span class="specialty">擅长：仿真陶瓷牙修复、牙周系统治疗、残根残冠的保存治疗等。</span>
              <i class="line"></i>
              <p class="doc">
                国内知名大学口腔医学学士，曾就职于高端私人齿科工作室，从事口腔事业10余年，对口腔各类常见疾病的临床治疗积累了丰富经验。积极学习新技术的临床应用，不断进修提升，精通牙体保存治疗。数次参加北京医科大学牙周学习研究项目、香港大学牙周学习研究项目。技术上追求完美，坚持
                “微创无痛治疗” 原则，深受患者的信赖！
              </p>
              <a href="javascript:void(0)" class="line-more">查看更多<i class="iconfont icon-jiantou1"></i></a>
            </div>
          </div>
          <div class="swiper-slide clearfix">
            <div class="img">
              <img src="./image/doc-img004.png" alt="" />
              <span class="name">方晓珍</span>
            </div>
            <div class="content">
              <h4 class="title">牙周主诊医师</h4>
              <span class="specialty">擅长：仿真陶瓷牙修复、牙周系统治疗、残根残冠的保存治疗等。</span>
              <i class="line"></i>
              <p class="doc">
                国内知名大学口腔医学学士，曾就职于高端私人齿科工作室，从事口腔事业10余年，对口腔各类常见疾病的临床治疗积累了丰富经验。积极学习新技术的临床应用，不断进修提升，精通牙体保存治疗。数次参加北京医科大学牙周学习研究项目、香港大学牙周学习研究项目。技术上追求完美，坚持
                “微创无痛治疗” 原则，深受患者的信赖！
              </p>
              <a href="javascript:void(0)" class="line-more">查看更多<i class="iconfont icon-jiantou1"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="p-r">
        <div class="swiper-pagination doctor-swiper-pagination"></div>
      </div>
    </div>
  </section>
  <!-- 医生end -->
  <!-- 新闻start -->
  <section class="news">
    <header>
      <div class="main-title padding-bottom-40 padding-top-90">
        <h4>朗朗口腔</h4>
        <p>
          呵护牙齿健康 创造美好未来
          <span></span>
          care for teeth to create a better future
        </p>
      </div>
    </header>
    <div class="container">
      <div class="tag-menu">
        <a href="" class="current">行业动态</a><a href="">朗朗资讯</a><a href="">媒体报道</a><a href="">公益活动</a>
      </div>
      <div id="news-wrap-info" class="row-content">
      </div>
    </div>
    </div>
  </section>
  <!-- 新闻end -->
  <!-- 主体内容end -->
  <!-- 底部start -->
<?php include('footer.php')?>
  <!-- 底部end -->
</body>
<script src="./js/banner.js"></script>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/common.js"></script>
<script src="./util/swiper/js/swiper.min.js"></script>
<script src="./js/doctorSwiper.js"></script>
<script src="./js/indexNewsAjax.js"></script>
<!-- ajax数据请求 -->
<script>
  flagTimer = null
  $.ajax({
    url: './data/index.php', //请求的url地址
    dataType: 'json', //返回格式为json
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
    cache: false, // 是否读取缓存
    data: {
      categoryId: '123456',
    }, //参数值
    type: 'post', //请求方式
    beforeSend: function () {
      //请求前的处理
    },
    success: function (req) {
      //请求成功时处理
      loadingMsg({
        wrap: 'infoListWrap',
        iconClass: 'loading-icon',
        iconfont: 'icon-jiazai1',
        message: '加载中',
      })
      // console.log(req.data[0].imgUrl)
      let wrap = document.getElementById('infoListWrap')
      let ul = `<ul class="clearfix">`
      if (req.data == null || req.data.length == 0) {
        loadingMsg({
          wrap: 'infoListWrap',
          iconfont: 'icon-tupianjiazaishibai',
          message: '加载失败',
        })
        return false
      }
      req.data.forEach((item) => {
        ul += ` <figure>
          <a href="news.php?id=${item.id}"title="新界面">
          <img src="${item.imgUrl}" alt="">
          <figcaption>
            ${item.title}
          </figcaption>
          <p>${item.dec}</p>
          </a>
        </figure>`
      })
      ul += `</ul>`
      flagTimer = setTimeout(() => {
        wrap.innerHTML = ul
        clearTimeout(flagTimer)
      }, 500)
    },
    complete: function () {
      //请求完成的处理
    },
    error: function () {
      //请求出错处理
    },
  })
</script>
<script>
  flagTimer1 = null
  $.ajax({
    url: './data/index.php', //请求的url地址
    dataType: 'json', //返回格式为json
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
    cache: false, // 是否读取缓存
    data: {
      module: 'welfare',
      categoryId: 10000,
    }, //参数值
    type: 'post', //请求方式
    beforeSend: function () {
      //请求前的处理
    },
    success: function (req) {
      //请求成功时处理
      loadingMsg({
        wrap: 'infoListWrap1',
        iconClass: 'loading-icon',
        iconfont: 'icon-jiazai1',
        message: '加载中',
      })
      // console.log(req.data[0].imgUrl)
      let wrap = document.getElementById('welfareWrap')
      if (req.data == null || req.data.length == 0) {
        loadingMsg({
          wrap: 'infoListWrap1',
          iconfont: 'icon-tupianjiazaishibai',
          message: '加载失败',
        })
        return false
      }
      data = req.data
      html = ` <div class="row">
          <div class="content-flex">
            <div class="content-flex-big">
              <img src="${data[0].imgUrl}" alt="${data[0].title}" />
            </div>
            <div class="content-flex-small"style="background-color: #${data[0].bgColor};color:${data[0].color};">
              <div class="content-doc" >
                <h4 class="title">${data[0].title}</h4>
                <time datetime="${data[0].date}">${data[0].date}</time>
                <i class="line"></i>
                <a href="javascript:void(0)" class="line-more">查看更多<i class="iconfont icon-jiantou1"></i></a>
              </div>
            </div>
          </div>
        </div>`
      data.forEach((item, index) => {
        if (index != 0) {
          html += ` <div class="row">
          <div class="content-flex">
            <div class="content-flex-big"style="background-color: #${item.bgColor};color:#${item.color};">
              <div class="content-doc" >
                <h4 class="title">${item.title}</h4>
                <time datetime="${item.date}">${item.date}</time>
                <i class="line"></i>
                <p class="doc">
                  ${item.dec}
                </p>
                <a href="javascript:void(0)" class="line-more">查看更多<i class="iconfont icon-jiantou1"></i></a>
              </div>
            </div>
            <div class="content-flex-small">
              <img src="${item.imgUrl}" alt="${item.title}" />
            </div>
          </div>
        </div>`
        }
      })
      flagTimer1 = setTimeout(() => {
        wrap.innerHTML = html
        clearTimeout(flagTimer)
      }, 500)
    },
    complete: function () {
      //请求完成的处理
    },
    error: function () {
      //请求出错处理
    },
  })
</script>

</html>